<template>
    <ContentBox title="人居环境">
        <div class="env">
            <div class="top">
                <div class="hl_content">
                    <div>
                        <span>
                            <img src="../../assets/image/zongrenkou.png" alt="">
                            总人口:
                        </span>
                        <span class="digiter-number">13万</span>
                    </div>
                    <div>
                         <span>
                            <img src="../../assets/image/renkoumidu.png" alt="">
                            人口密度:
                        </span>
                        <span class="digiter-number">1万/平方千米</span>
                    </div>
                    <div>
                         <span>
                            <img src="../../assets/image/gdp.png" alt="">
                            GDP:
                        </span>
                        <span class="digiter-number">321万亿</span>
                    </div>
                    <div>
                         <span>
                            <img src="../../assets/image/laobaozhangongbi.png" alt="">
                            劳保福利占工资比重
                        </span>
                        <span class="digiter-number">32%</span>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="hl_content">
                    <div>
                        <span>
                            <img src="../../assets/image/jingqu.png" alt="">
                            景区:
                        </span>
                        <span class="digiter-number">13处</span>
                    </div>
                    <div>
                         <span>
                            <img src="../../assets/image/gongnuanxiaoqu.png" alt="">
                            供暖小区数量:
                        </span>
                        <span class="digiter-number">12个</span>
                    </div>
                    <div>
                         <span>
                            <img src="../../assets/image/gongjiaoxianlu.png" alt="">
                            公交线路:
                        </span>
                        <span class="digiter-number">321条</span>
                    </div>
                    <div>
                         <span>
                            <img src="../../assets/image/qichebaoyouliang.png" alt="">
                            汽车保有量
                        </span>
                        <span class="digiter-number">32万辆</span>
                    </div>
                    <div>
                         <span>
                            <img src="../../assets/image/chengshizaoyinjiance.png" alt="">
                            城市噪音检测平均
                        </span>
                        <span class="digiter-number">32分贝</span>
                    </div>
                </div>
            </div>
        </div>
    </ContentBox>

</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"

    export default {
        name: "Preview",
        components: {
            ContentBox
        }
    }
</script>

<style lang="scss" scoped>
    .env {
        height: 100%;
        width: 100%;

        display: flex;
        flex-direction: column;
        padding: 0 40px;

        > div {
            flex: 1;
            display: flex;
            flex-direction: column;
            &:first-child {
                border-bottom: 1px dashed #085370;
            }
        }

    }

    .hl_content {
        flex: 1;
        display: flex;
        flex-direction: column;

        > div {

            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            > span {
                flex: 1;
                font-size: 31px;

                &:first-child {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    img {
                        margin-right: 20px;
                    }
                }
                &:last-child {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                }

            }
        }
    }
</style>
